import './useCanvas.scss'
class useCanvas {
  canvasEl: HTMLCanvasElement//canvas根节点
  ctx: CanvasRenderingContext2D//canvas对象
  isDart: boolean = false//是否开始绘制
  dartType: string = 'rect'//绘制什么图形默认是矩形
  x: number = 0//x轴
  y: number = 0//y轴
  width: number = 0//宽度
  height: number = 0//高度
  cHeight: number = 0//宽度
  cWidth: number = 0//高度
  arrDart = []//保存所有的数据
  color = '#000'//颜色
  lineWidth = 1//粗
  radius = 0//圆的半径
  x2 = 0//x轴
  y2 = 0//y轴
  writeArr = [] //保存手写的位置
  rectId: number
  input: HTMLInputElement = document.createElement('input') //文字输入的input
  constructor(canvasId) {
    this.canvasEl = document.getElementById(canvasId) as HTMLCanvasElement
    this.ctx = this.canvasEl.getContext('2d')
    this.canvasEl.parentElement.style.position = 'relative'
    this.canvasEl.height = this.canvasEl.parentElement.clientHeight
    this.canvasEl.width = this.canvasEl.parentElement.clientWidth
    this.cHeight = this.canvasEl.height
    this.cWidth = this.canvasEl.width
    this.initCanvas()
  }
  initCanvas() {
    // 鼠标按下
    this.canvasEl.onmousedown = this.mousedown.bind(this)
    // 鼠标移动
    this.canvasEl.onmousemove = this.mousemove.bind(this)
    // 鼠标抬起
    this.canvasEl.onmouseup = this.mouseup.bind(this)
    // 鼠标双击
    this.canvasEl.ondblclick = this.dblclick.bind(this)
    this.canvasEl.onclick = this.click.bind(this)
    // this.getBox()
  }
  click(e) {
    // 在 抽屉  canvas的点击坐标
    /**
     * 400 //对应x参数
     *x 10 对应y
     * y 20 对应 h
     * y tow 10  y
     */
    // this.getBoxs(540, 20, 30, 200, 360, 4, 5)
    const x = e.offsetX - 400 + 10
    const y = e.offsetY - 20 - 10
    const maxw = 120
    const minw = 0
    const maxh = 80
    const minh = 0
  }
  getBox() {
    this.getBoxs(540, 20, 30, 200, 360, 4, 5)

  }
  /**
   * 
   * @param w 宽
   * @param h 距离x轴的高度
   * @param y 角度
   * @param x 距离y轴的距离
   * @param j 高度
   * @param rel 纵的数量
   * @param hor 横的数量
   */
  getBoxs(w, h, y = 10, x = 30, j, rel = 0, hor = 0) {
    // 绘制上面
    this.frontFace(w, h, y, x)
    // 绘制侧边
    this.broadsideFace(w, h, j, y, x)
    // 绘制底面
    if (!rel) {
      this.frontFace(w, h + j, y, x)
    }
    for (let i = 0; i < rel; i++) {
      this.frontFace(w, h + j / rel * (i + 1), y, x)
    }
    for (let i = 0; i < hor; i++) {
      this.trendsbroadsideFace(h, j, y, x + w / hor * (i + 1))

    }
  }
  // 绘制侧面
  broadsideFace(w, h, s = 50, y = 10, x = 30) {
    // 左右两边的高
    // 绘制左高
    this.ctx.beginPath()
    this.ctx.lineTo(x, h)
    this.ctx.lineTo(x, h + s)
    this.ctx.stroke()
    this.ctx.beginPath()
    this.ctx.lineTo(x - y, h + y)
    this.ctx.lineTo(x - y, h + s + y)
    this.ctx.stroke()
    // 绘制右高
    this.ctx.beginPath()
    this.ctx.lineTo(w + x, h)
    this.ctx.lineTo(w + x, h + s)
    this.ctx.stroke()
    this.ctx.beginPath()
    this.ctx.lineTo(w + x - y, h + y)
    this.ctx.lineTo(w + x - y, h + s + y)
    this.ctx.stroke()
    this.ctx.beginPath()

    this.ctx.fillStyle = 'red'
    this.ctx.fill()
    // end
  }
  // 绘制正面
  frontFace(w, h, y = 10, x = 30) {
    // 上面的面
    // 绘制上下
    this.ctx.beginPath()
    this.ctx.lineTo(x, h)
    this.ctx.lineTo(w + x, h)
    this.ctx.stroke()
    this.ctx.beginPath()
    this.ctx.lineTo(x - y, h + y)
    this.ctx.lineTo(w + x - y, h + y)
    this.ctx.stroke()
    // 绘制左右
    this.ctx.beginPath()
    this.ctx.lineTo(x, h)
    this.ctx.lineTo(x - y, h + y)
    this.ctx.stroke()
    this.ctx.beginPath()
    this.ctx.lineTo(w + x, h)
    this.ctx.lineTo(w + x - y, h + y)
    this.ctx.stroke()
    // end
  }
  // 动态的侧边边
  trendsbroadsideFace(h, s = 50, y = 10, x = 30) {
    // 左右两边的高
    // 绘制左高
    this.ctx.beginPath()
    this.ctx.lineTo(x, h)
    this.ctx.lineTo(x, h + s)
    this.ctx.stroke()
    this.ctx.beginPath()
    this.ctx.lineTo(x - y, h + y)
    this.ctx.lineTo(x - y, h + s + y)
    this.ctx.stroke()
    // 绘制顶部线
    this.ctx.beginPath()
    this.ctx.lineTo(x - y, h + y)
    this.ctx.lineTo(x, h)
    this.ctx.stroke()
    // 绘制下部线
    this.ctx.beginPath()
    this.ctx.lineTo(x, h + s)
    this.ctx.lineTo(x - y, h + s + y)
    this.ctx.stroke()

    // end
  }

  // 改变状态
  setDartType(type) {
    this.dartType = type
    this.writeArr = []
  }

  // 鼠标双击
  dblclick(e) {
    if (this.dartType === 'text') {
      this.x = e.offsetX
      this.y = e.offsetY
      this.dartText(this.x, this.y, this.color, this.lineWidth)
    }
  }
  // 鼠标按下
  mousedown(e: MouseEvent) {
    this.isDart = true
    this.x = e.offsetX
    this.y = e.offsetY
  }
  // 鼠标移动
  mousemove(e: MouseEvent) {
    if (this.dartType === '1') return
    if (this.isDart) {
      if (!['write', 'text'].includes(this.dartType)) {
        this.setForData()

      }
      // 画矩形5
      if (this.dartType === 'rect') {
        this.width = e.offsetX - this.x
        this.height = e.offsetY - this.y
        if (!this.width && !this.height) return

        this.dartRect(this.x, this.y, this.width, this.height, this.color, this.lineWidth)
      }
      // 画圆
      if (this.dartType === 'round') {
        if (e.offsetX - this.x > e.offsetY - this.y) {
          this.radius = Math.abs(e.offsetX - this.x)
        } else {
          this.radius = Math.abs(e.offsetY - this.y)
        }
        this.dartArc(this.x, this.y, this.radius, this.color, this.lineWidth)
      }
      // 画线
      if (this.dartType === 'line') {
        this.x2 = e.offsetX
        this.y2 = e.offsetY

        this.dartLine(this.x, this.y, this.x2, this.y2, this.color, this.lineWidth)
      }
      // 手写
      if (this.dartType === 'write') {
        this.x = e.offsetX
        this.y = e.offsetY
        console.log(this.x, this.y);

        this.dartWrite(this.x, this.y, this.color, this.lineWidth)
        // this.writeArr.push({ x: this.x, y: this.y })

      }
      // 移动
      if (this.dartType === 'move') {
        this.arrDart.map(val => {
          if (['rect'].includes(val.dartType)) {
            const rect = this.canvasEl.getBoundingClientRect();
            this.x = e.clientX - rect.left
            this.y = e.clientY - rect.top

            if (this.getMaxMin(val.width, val.x, val.height, val.y, this.x, this.y)) {

              if (this.rectId === val.id) {

                val.x = this.x - val.width/2
                val.y = this.y - val.height/2
                // eslint-disable-next-line array-callback-return

              }
              if (!this.rectId) {
                val.x = this.x - val.width/2
                val.y = this.y - val.height/2
                this.rectId = val.id
              }
            }
          }
          if (['round'].includes(val.dartType)) {
            const rect = this.canvasEl.getBoundingClientRect();
            this.x = e.clientX - rect.left
            this.y = e.clientY - rect.top
            
            if (this.getroundMaxMin(val.x, val.y, val.radius*2, this.x, this.y)) {

              if (this.rectId === val.id) {

                val.x = this.x 
                val.y = this.y 
                // eslint-disable-next-line array-callback-return

              }
              if (!this.rectId) {
                val.x = this.x 
                val.y = this.y 
                this.rectId = val.id
              }


            }
          }
        })
      }
    }
  }
  getMaxMin(xMax, xMin, yMax, yMin, x, y) {
    return (xMax + xMin) > x && xMin < x && (yMax + yMin) > y && yMin < y
  }
  getroundMaxMin(xMin, yMin, radius, x, y) {
    return (xMin-radius) < x && (xMin + radius) > x && (yMin-radius) < y && (yMin + radius) > y
  }
  // 鼠标抬起
  mouseup() {
    this.rectId = null
    this.isDart = false
    this.ctx.beginPath();
    // 矩形
    if (this.dartType === 'rect') {
      const length = this.arrDart.filter(val => val.dartType === 'rect').length
      this.arrDart.push(
        { id:'rect'+ length , x: this.x, y: this.y, width: this.width, height: this.height, dartType: this.dartType, color: this.color, lineWidth: this.lineWidth }
      )
    }

    // 圆形
    if (this.dartType === 'round') {
      const length = this.arrDart.filter(val => val.dartType === 'round').length
      this.arrDart.push(
        { id:'round'+ length , x: this.x, y: this.y, dartType: this.dartType, color: this.color, lineWidth: this.lineWidth, radius: this.radius }
      )
    }
    // 画线
    if (this.dartType === 'line') {
      this.arrDart.push(
        { x: this.x, y: this.y, x2: this.x2, y2: this.y2, dartType: this.dartType, color: this.color, lineWidth: this.lineWidth, }
      )
    }
    // if (this.dartType === 'write') {
    //   this.arrDart.push(
    //     { x: this.x, y: this.y, writeArr: this.writeArr, dartType: this.dartType, color: this.color, lineWidth: this.lineWidth, }
    //   )
    // }

  }
  setForData() {

    this.clearRect()
    this.arrDart.map(val => {
      if (val.dartType === 'rect') {
        this.dartRect(val.x, val.y, val.width, val.height, val.color, val.lineWidth)
      }
      if (val.dartType === 'round') {
        this.dartArc(val.x, val.y, val.radius, val.color, val.lineWidth)
      }
      if (val.dartType === 'line') {
        this.dartLine(val.x, val.y, val.x2, val.y2, val.color, val.lineWidth)
      }
      if (val.dartType === 'write') {

        val.writeArr.map(vals => {
          this.dartWrite(vals.x, vals.y, val.color, val.lineWidth)
        })
      }
      // 文字
      if (val.dartType === 'text') {
        this.dartText(val.x, val.y, val.color, val.lineWidth, val.value, true)


      }
    })
  }
  // 画矩形
  dartRect(x, y, w, h, color, lineWidth) {

    this.ctx.lineWidth = lineWidth
    this.ctx.lineCap = 'round'
    this.ctx.strokeStyle = color
    this.ctx.beginPath()
    this.ctx.rect(x, y, w, h)
    this.ctx.stroke()

  }
  // 画圆
  dartArc(x, y, radius, color, lineWidth) {
    this.ctx.lineWidth = lineWidth
    this.ctx.strokeStyle = color
    this.ctx.beginPath()
    this.ctx.arc(x, y, radius, 0, 2 * Math.PI);
    this.ctx.stroke();
  }
  // 画线
  dartLine(x, y, x2, y2, color, lineWidth) {
    this.ctx.lineWidth = lineWidth
    this.ctx.strokeStyle = color
    this.ctx.beginPath()
    this.ctx.moveTo(x2, y2)
    this.ctx.lineTo(x, y)
    this.ctx.stroke();
  }
  // 手写
  dartWrite(x, y, color, lineWidth) {
    this.ctx.lineWidth = lineWidth;
    this.ctx.strokeStyle = color
    this.ctx.lineTo(x, y)
    this.ctx.stroke();
    this.ctx.moveTo(x, y);
  }
  // 文字
  dartText(x, y, color, lineWidth, text?, isHisty?) {
    this.ctx.fillStyle = color
    if (isHisty) {
      this.dartFillText(x, y, text)
      return
    }

    this.input.style.left = x + 'px'
    this.input.style.top = y + 'px'
    this.input.style.color = color
    this.input.className = 'input-text'
    console.log(this.canvasEl.parentElement.children);
    const children = this.canvasEl.parentElement.children
    for (let i = 0; i < children.length; i++) {
      console.log(children[i].className);
      if (children[i].className === 'input-text') {
        this.canvasEl.parentElement.removeChild(this.input)
      }
    }


    this.canvasEl.parentElement.appendChild(this.input)
    this.input.focus()
    this.input.onblur = () => {
      this.canvasEl.parentElement.removeChild(this.input)
      this.dartFillText(x, y, this.input.value)
      this.arrDart.push({
        x: x, y: y, dartType: this.dartType, value: this.input.value, color: this.color, lineWidth: this.lineWidth,
      })
      this.input.value = ''
    }
  }
  // 开始画文字
  dartFillText(x, y, text) {
    this.ctx.fillText(text, x, y)
    this.ctx.font = '16px 微软雅黑'
  }
  // 清空画布
  clearRect() {
    this.ctx.clearRect(0, 0, this.cWidth, this.cHeight)

  }
  // 撤回
  setWithdraw() {
    this.arrDart.pop()
    this.setForData()
    console.log(this.arrDart);


  }
  emptyArrrrDart() {
    this.arrDart = []
    this.clearRect()
  }
}


export default useCanvas